<template>
    <div class="nav">
        <div class="topper">
            <van-nav-bar title="我的预约" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="middle">
            <van-tabs v-model:active="active">
                <van-tab title="疫苗预约">
                    <div class="body1">
                        <div class="below1">
                            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                                <van-swipe-item></van-swipe-item>
                                <van-swipe-item></van-swipe-item>
                                <van-swipe-item></van-swipe-item>
                                <van-swipe-item></van-swipe-item>
                            </van-swipe>
                        </div>
                        <div class="below2">
                            <img src="../my/pic/najie.png" alt="">
                            <p>暂无预约记录</p>
                            <van-button type="primary" to="hpv">去预约</van-button>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="疫苗订单">
                    <div class="body2">
                        <img src="../my/pic/najie.png" alt="">
                        <p>这里暂时什么都没有哦</p>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script lang="ts" scoped>
import { ref } from 'vue';
export default {
    setup() {
        const active = ref(0);
        const onClickLeft = () => history.back();
        return {
            onClickLeft,
            active,
        };
    },
}
</script>

<style lang="less" scoped>
.topper {
    :deep(.van-icon-arrow-left:before) {
        color: black;
        font-size: 20px;
    }

    :deep(.van-nav-bar__title) {
        color: rgb(60, 59, 59);
        font-size: 18px;
        font-weight: 550;
    }

}

;

.middle {
    .body2 {
        height: 578px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgb(241, 249, 249);

        img {
            border-radius: 100px;
        }
    }

    .body1 {
        padding-top: 20px;
        background-color: rgb(241, 249, 249);

        .below1 {
            margin: 0 auto;
            width: 350px;

            .my-swipe .van-swipe-item {
                color: #fff;
                font-size: 20px;
                height: 100px;
                text-align: center;
                background-color: #39a9ed;
                border-radius: 15px;
            }

            .my-swipe .van-swipe-item:nth-child(1) {
                background: url(../../assets/imgs/九价.jpg) no-repeat;
                background-size: 100% 100%;
            }

            .my-swipe .van-swipe-item:nth-child(2) {
                background: url(../../assets/图层 7.png) no-repeat;
                background-size: 100% 100%;
            }

            .my-swipe .van-swipe-item:nth-child(3) {
                background: url(../../assets/imgs/疫苗.jpg) no-repeat;
                background-size: 100% 100%;
            }

            .my-swipe .van-swipe-item:nth-child(4) {
                background: url(../../assets/imgs/药品.jpg) no-repeat;
                background-size: 100% 100%;
            }
        }

        .below2 {
            height: 578px;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: rgb(241, 249, 249);

            img {
                border-radius: 100px;
            }

            ;

            :deep(.van-button--normal) {
                width: 150px;
                border-radius: 30px;
                border: 0;
                height: 40px;
                background-color: rgb(45, 233, 170);
                color: white;
            }
        }

        ;
    }

    :deep(.van-tabs__line) {
        background: rgb(8, 208, 8);
    }
}</style>
